<template>
  <div class="login-container">
    <div class="login-box">
      <h3 class="title">智能招聘系统-平台端</h3>
      <el-form ref="loginForm" :model="loginForm" class="login-form">
        <h4>欢迎登录</h4>
        <el-form-item>
          <el-input
            v-model="loginForm.account"
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="captcha-container">
            <el-input
              placeholder="请输入验证码"
              v-model="loginForm.code"
              prefix-icon="el-icon-key"
              size="medium"
              style="flex: 1"
            >
            </el-input>
            <img
              :src="`data:image/png;base64,${loginImageBase64}`"
              @click="getLoginCodeHandler"
              class="captcha-image"
              alt="验证码"
            />
          </div>
          <div class="captcha-hint">点击验证码刷新</div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="login-btn"
            @click="loginSubmitHandler"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getCode, login } from "@/api/admin";
export default {
  data() {
    return {
      loginForm: {
        account: "",
        password: "",
        code: "",
        unique: null,
      },
      loginImageBase64: "",
    };
  },
  methods: {
    getLoginCodeHandler() {
      getCode({ userUnique: this.loginForm.unique }).then((res) => {
        this.loginForm.unique = res.data.unique;
        this.loginImageBase64 = res.data.code;
      });
    },
    loginSubmitHandler() {
      if (!this.loginForm.account || !this.loginForm.password) {
        this.$message.error("请输入账号和密码");
        return;
      }
      if (!this.loginForm.code) {
        this.$message.error("请输入验证码");
        return;
      }
      login(this.loginForm).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.data);
          // 页面跳转
          this.$router.push("/main");
        } else if (res.code == 4001) {
          this.$message({
            type: "error",
            message: "验证码错误",
          });
        }
      });
    },
  },
  mounted() {
    this.getLoginCodeHandler();
  },
};
</script>

<style scoped>
.login-container {
  background: url("@/assets/login.png") no-repeat center center;
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box {
  text-align: center;
  color: #fff;
}
.title {
  font-size: 24px;
  margin-bottom: 30px;
}
.login-form {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  margin: 0 auto;
}
.login-form h4 {
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
  display: inline-block;
}
.login-btn {
  width: 100%;
}
</style>